<template>
  <div class="message-type common_chat_emoji-wrapper-global"
       :class="{ sender: sender, receiver: receiver }">
    <!-- 头像 -->
    <div class="avatar-wrapper">
      <img class="kf-img" :src="dataSource.avatarUrl" />
    </div>

    <div class="message-box">
      <div class="chat-name">{{dataSource.chatName}}</div>

      <message-text v-if="fieldType === 'text'" :value="dataSource.content"></message-text>
      <message-image v-else-if="fieldType === 'image'" :file-url="dataSource.fileUrl"></message-image>
      <message-file
        v-else-if="fieldType === 'file'"
        :file-name="dataSource.fileName"
        :file-url="dataSource.fileUrl"
        :state="dataSource.state"
      ></message-file>

      <!-- 测试消息，文本类型 -->
      <message-text v-if="dataSource.contentType === 'transformServer'">
        当前没有配置机器人，
        <el-button type="text" @click="() => $emit('chatCallback', 'transformServer')">转接客服</el-button>
      </message-text>
    </div>
  </div>
</template>

<script>
import MessageText from './message-text';
import MessageImage from './message-image';
import MessageFile from './message-file';

export default {
  name: 'message-type',
  components: { MessageText, MessageImage, MessageFile },
  props: {
    /**
     * 消息类型；文本-text; 图片-image; 文件-file; 默认为文本
     */
    fieldType: {
      type: String,
      default: 'text',
    },
    dataSource: {
      type: Object,
      default: () => ({
        content: '',
        contentType: 'text',
      }),
    },
    // 发送方
    sender: {
      type: Boolean,
      default: false,
    },
    // 接收方
    receiver: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {};
  },
};
</script>

<style lang="scss" scoped>
.message-type {
  margin-top: 18px;
  font-size: 14px;
  overflow: hidden;

  &:before, &:after {
    content: '';
    display: table;
    clear: both;
  }

  .avatar-wrapper {
    float: left;
    margin: 0 12px;

    .kf-img {
      width: 40px;
      height: 40px;
    }
  }

  .message-box {
    .chat-name {
      margin-bottom: 10px;
    }
  }

  &.sender {
    .avatar-wrapper {
      float: right;
    }

    .message-box {
      float: right;

      .chat-name {
        text-align: right;
      }
    }

    .item-content {
      background-color: rgba(236, 128, 20, 0.2);
      border-color: #EC8014;
      border-radius: 8px 0 8px 8px;
    }
  }

  &.receiver {
    .avatar-wrapper {
      float: left;
    }

    .message-box {
      float: left;
    }

    .item-content {
      background-color: rgba(4, 175, 255, 0.2);
      border-color: #04AFFF;
      border-radius: 0 8px 8px 8px;
    }
  }

  .item-content {
    position: relative;
    max-width: 330px;
    color: #fff;
    font-size: 13px;
    border-width: 1px;
    border-style: solid;

    .qqemoji {
      width: 24px;
      height: 24px;
    }
  }
}

</style>
